import { Alert } from '@aws-amplify/ui-react';

## System Clock Offset

The `systemClockOffset` can optionally be passed to the `FaceLivenessDetectorCore` config, where it will be added as an offset in milliseconds to the AWS server time. This can be useful when the user's device time is inaccurate or when the user is frequently switching time zones. An example of calculating the offset and passing it to the `FaceLivenessDetectorCore` is shown below:

<Alert role="none" variation="info">The following example requires that headers with the Date are available in the response. The solution will need to be modified based on the call to your backend API.</Alert>

```jsx
import React from 'react';
import { FaceLivenessDetectorCore } from '@aws-amplify/ui-react-liveness';

function MyComponent() {
  const [createLivenessApiData, setCreateLivenessApiData] = React.useState(null);
  
  /* 
   * 1. Check whether the difference between server time and device time is
   *  greater than or equal to 5 minutes, and if so, return the offset in milliseconds.
   *  This logic should be adjusted based on the server response and use case
  */ 
  const getSystemClockOffset = (serverTime: number) => {
    const maxSupportedClockSkew = 5 * 60 * 1000; // 5 minutes
    const deviceTime = Date.now();
    const delta = serverTime ? serverTime - deviceTime : 0;
    return Math.abs(delta) >= maxSupportedClockSkew ? delta : undefined;
  }
  
  React.useEffect(() => {
    /*
    * Replace with your own API call to create a session
    */
    const response = await fetch(`/api/createSession`);
    const body = await response.json(); // { sessionId: 'mockSessionId' } 
    /*
    * Replace serverTime with the actual server date,
    * which can be retrieved from the response headers or your custom backend.
    */
    const serverTime = response.headers['date']
    const systemClockOffset = getSystemClockOffset(serverTime)
    setCreateLivenessApiData({body, systemClockOffset});
  }, []);
    
  return (
    <div>
      <FaceLivenessDetectorCore
        sessionId={createLivenessApiData.sessionId}
        region={'us-east-1'}
        /* 
         * 2. Pass systemClockOffset to the config 
        */
        config={{
          systemClockOffset={createLivenessApiData.systemClockOffset}
        }}
      />
    </div>
  );
}


```